<template>
	<div class="login">
		<button type="button" @click="getHtml">获取结果</button>
		<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
		</quill-editor>
	</div>
</template>
<script>
	// https://blog.csdn.net/div_ma/article/details/79536634
	import { quillEditor } from "vue-quill-editor";
	export default {
		name: "Login",
		data() {
			return {
				content: '<description>帕加马卫城，位于土耳其安纳托利亚省，是希腊安纳托利亚古国阿塔罗斯王朝的首都，古时艺术、学问的中心，集希腊文化之大成。至少在公元前5世纪阿契美尼德王朝（Achaemenid）的波斯帝国统治小亚细亚时，帕加马便已存在。这里曾是亚洲的罗马中心，因贵族的疗养院——阿克勒毕昂而成为远近闻名的医治中心。</br></br>帕加马古城遗址：占地88公顷，分为上下两城，上城卫城Acropolis建在一座350米高的山头上，集中了集市、广场、剧场、图书馆、祭坛、神殿和王宫，曾经是古城精华所在；下城阿斯克勒庇俄斯神殿Temple of Asclepios主要是医疗神殿，也有市场、剧场、澡堂等公共建筑。两地相距8公里。</br></br>卫城建于罗马皇帝图拉真和哈德良统治时期，城中神庙、宫殿、剧场、图书馆、体育馆、市场、浴室。图书馆曾经是仅次于埃及亚历山大图书馆的古代世界第二大图书馆。</br></br>阿斯克勒庇俄斯神庙Temple of Asclepios是古代医疗中心遗址，得名于健康之神Asclepios，建成于公元前4世纪。</br></br>阿塔罗斯一世（约前269年－前197年）帕加马王国国王，统治时间前241年－前197年，他统治的帕加马城是爱奥尼亚的一座希腊城邦。</br></br>重要历史基础设施：位于贝尔加马市中心红色大教堂前院下方近200米宽的佩加蒙大桥是古代最大的桥梁建筑。除了蓄水池之外，还有一个由九个管道组成的系统（七个希腊时期的陶瓷管道和两个开放的罗马通道。该系统每天提供约30,000-35,000立方米的水。</br></br>古罗马巴扎大街Roman Bazzar Street</br><img src=\"http://s11.sinaimg.cn/middle/715d89feta029110175ea&amp;690\"/></br><img src=\"http://s10.sinaimg.cn/middle/715d89feta0295b3f6e99&amp;690\"/></br><img src=\"http://s6.sinaimg.cn/middle/715d89feta029e6ddb295&amp;690\"/></br></br>德国柏林的帕加马博物馆的《宙斯祭坛》模型 </br><img src=\"http://s3.sinaimg.cn/mw690/7ad44d07td0641e8d9372&amp;690\"/></br></br>复原的帕加马卫城</br><img src=\"https://upload.wikimedia.org/wikipedia/commons/7/78/Acropolis_of_Pergamon_-_Friedrich_Thierch_-_1882.jpg\"/></br><img src=\"https://upload.wikimedia.org/wikipedia/en/4/4b/View_of_ancient_Pergamon.jpg\"/></br></br>佩加蒙 维基百科</br><a href=\"https://en.wikipedia.org/wiki/Pergamon\">https://en.wikipedia.org/wiki/Pergamon</a></br></br>夕阳下的辉煌：帕加马卫城</br><a href=\"http://blog.sina.com.cn/s/blog_715d89fe0100qo6o.html\">http://blog.sina.com.cn/s/blog_715d89fe0100qo6o.html</a></br></br>瑰宝与废墟——希腊帕加马古城</br><a href=\"http://blog.sina.com.cn/s/blog_a332c2660101457a.html\">http://blog.sina.com.cn/s/blog_a332c2660101457a.html</a></br></br>阿塔罗斯一世 百度百科</br><a href=\"https://baike.baidu.com/item/%E9%98%BF%E5%A1%94%E7%BD%97%E6%96%AF%E4%B8%80%E4%B8%96/8755027?fr=aladdin\">https://baike.baidu.com/item/%E9%98%BF%E5%A1%94%E7%BD%97%E6%96%AF%E4%B8%80%E4%B8%96/8755027?fr=aladdin</a></br></br>帕加马与阿塔利德王朝</br><a href=\"http://bbs.tianya.cn/post-no05-449918-1.shtml?st=164\">http://bbs.tianya.cn/post-no05-449918-1.shtml?st=164</a></br></br>爱琴文明游之帕加马医神殿</br><a href=\"http://blog.sina.com.cn/s/blog_5d8187550102xrpw.html\">http://blog.sina.com.cn/s/blog_5d8187550102xrpw.html</a></br><a href=\"http://blog.sina.com.cn/s/blog_7ad44d0701014dqg.html\">http://blog.sina.com.cn/s/blog_7ad44d0701014dqg.html</a></description>',
				editorOption: {
					modules: {
						toolbar: {
							container: [
							 ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
								['blockquote', 'code-block'], //引用，代码块
								[{ 'header': 1 }, { 'header': 2 }], // 几级标题
								[{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表，无序列表
								[{ 'script': 'sub' }, { 'script': 'super' }], // 下角标，上角标
								[{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
								[{ 'direction': 'rtl' }], // 文字输入方向
								[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
								[{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题
								[{ 'color': [] }, { 'background': [] }], // 颜色选择
								[{ 'font': [] }], // 字体
							 [{ 'align': [] }], // 居中
								['clean'],
								['image','customImage']
							],
							handlers: {
								'customIndent': function(value){
									if (value) {
										try{
											// var href = prompt('输入图片地址');
											console.log(this)
										}catch(e){}
									} else {
										// this.quill.format('image', false);
									}
								},
								'customImage': function(value) {
									if (value) {
										try{
											// '//img.book118.com/sr1/M00/26/22/wKh2Al_-qs2IewtlAABotYCq5xgAAotwgGBuhwAAGjN343.png'
											var href = prompt('输入图片地址');
											this.quill.format('image', href);
										}catch(e){}
									} else {
										this.quill.format('image', false);
									}
								}
							}
						},
					},
				},
			};
		},
		methods: {
			onEditorBlur(e) {
				//失去焦点事件
				console.log("失去焦点事件", this.content);
			},
			onEditorFocus() {
				//获得焦点事件
			},
			onEditorChange() {
				//内容改变事件
			},
			getHtml() {
				console.log('获取的内容：', this.content)
			}
		},
	};
</script>
<style rel="stylesheet/scss" lang="scss">
	.ql-customImage {
		background: url() no-repeat center center !important;
	}
	
	.ql-indent-1 {
		padding: 0 !important;
		text-indent: 1em;
	}
	
	.ql-indent-2 {
		padding: 0 !important;
		text-indent: 2em;
	}
	
	.ql-indent-3 {
		padding: 0 !important;
		text-indent: 3em;
	}
	
	.ql-indent-4 {
		padding: 0 !important;
		text-indent: 4em;
	}
	
	.ql-indent-5 {
		padding: 0 !important;
		text-indent: 5em;
	}
	
	.ql-indent-6 {
		padding: 0 !important;
		text-indent: 6em;
	}
	
	.ql-indent-7 {
		padding: 0 !important;
		text-indent: 7em;
	}
	
	.ql-indent-8 {
		padding: 0 !important;
		text-indent: 8em;
	}
	
</style>
